<template>
  <el-container style="background-image: url(../../static/img/loginBg.png);height: 100%;">
     <el-header>
       <img src="../../static/img/loginHeader.png" style="width: 100%;height: 90px;"/>
     </el-header>
      <el-main style="height: 700px;">
		  <div style="width: 600px;height:400px;float:left;margin-top: 10px;">
		    <img src="../../static/img/loginImg.png" style="width: 412px;height: 440px;float: right;margin-top: 70px;"/>
		  </div>
		  <div style="width: 700px;height:400px;float:left;">
			  <h3 style="margin-top: 100px;margin-bottom: 50px;margin-left: 270px;color: #052D8B;">12123警员登录</h3>
			  <el-form ref="form" :model="police":rules="rules" label-width="80px" style="width: 450px;margin-left: 150px;font-weight: 700;">
			    <el-form-item :label="loginForm.nameTitle" prop="cardId">
			      <el-col :span="22">
			         <el-input v-model="police.cardId"></el-input>
			      </el-col>
			    </el-form-item>
			    <el-form-item :label="loginForm.passTitle" prop="password">
			       <el-col :span="loginForm.num">
			         <el-input v-model="police.password" type="password" ></el-input>
			       </el-col>
			       <el-col :span="11">
			          <el-button v-show="loginForm.ok" @click="sendCode()">发送验证码</el-button>
			       </el-col>
			    </el-form-item>
			    <el-form-item>
			       <el-button size="small" round @click="AccountLogin()">密码验证登录</el-button>
			       <el-button size="small" round @click="phoneLogin()">短信验证登录</el-button>
			  	 <el-button size="small" round @click="driverLogin()">驾驶员登录</el-button>
			    </el-form-item>
			    <el-form-item style="margin-top: 20px;margin-left: 100px;">
			      <el-button type="primary" @click="login()"style="font-weight: 700;">登录</el-button>
			      <el-button style="font-weight: 700;">取消</el-button>
			    </el-form-item>
			  </el-form>
		  </div>
      </el-main>
      <el-footer style="width: 100%;height: 50px;">
         <img src="../../static/img/loginFoot.png" style="width: 100%;height: 150px;"/>
      </el-footer>
  </el-container>
</template>

<script>
//引入工具对象myUtil.js  就可以调用其对象myUtil.url和方法myUtil.add
import myUtil from '../util/myUtil'
//引入axios模块
import axios from 'axios'
export default {
    data() {
      return {
        police: {
          cardId: '',
          password: '',
          confirmCode:""
        },
        loginForm:{
          title:"密码验证登录",
          nameTitle:"账号",
          passTitle:"密码",
          ok:false,
          num:22
        },
        rules: {
           cardId: [
             { required: true, message: '信息不能为空', trigger: 'blur' },
             { min: 11, max: 18, message: '身份证长度在15到18位，电话号码11位', trigger: 'blur' }
           ],
           password: [
             { required: true, message: '信息不能为空', trigger: 'blur' },
             { min: 4, max: 12, message: '密码长度在8到12位，验证码4位', trigger: 'blur' }
           ],
         },
      }
    },
    methods: {
      login() {
        var mythis=this;
        if(this.loginForm.passTitle=="验证码"){//验证码登录
          console.log('手机验证登录!');
          if(this.police.password==this.police.confirmCode){
            console.log('验证码正确!');
            //根据电话号码获取用户信息  并存入到police对象
            axios({
              headers:{
               'Content-Type':"application/json"
              },
               method:"get",
               url:myUtil.url+"/api/getPoliceByPhone/"+mythis.police.cardId,
             }).then(function(rs){
               if(rs.data.police != null){
                 //第一种本地存储 将登录成功的返回数据 存储在前端本地
                 localStorage.removeItem("loginDriverCardId")
                 localStorage.setItem("loginPoliceCardId",rs.data.police.cardId);
                 console.log(rs.data.police);
                 //然后跳到启动主页面
                 mythis.$router.push("indexTrafficsys");
                 return;
               }else{
				   mythis.$alert("对不起！该手机号还未注册！")
			   }
              })
          }else{
            alert("验证码错误！");
            return;
          }
        }else{//密码登录
          console.log(this.police.cardId.length)
          if(this.police.cardId.length <= 15 && this.police.cardId.length >=8){//电话号码登录
            axios({
               headers:{
                'Content-Type':"application/json"
               },
               method:"post",
               url:myUtil.url+"/api/policeLogin",
               data:{phone:mythis.police.cardId,password:mythis.police.password}
             }).then(function(rs){
               console.log(rs.data.info);
               if(rs.data.info=="登录成功"){
                 //第一种本地存储 将登录成功的返回数据 存储在前端本地
                 localStorage.removeItem("loginDriverCardId")
                 localStorage.setItem("loginPoliceCardId",rs.data.police.cardId);
                 //然后跳到启动主页面
                 mythis.$router.push("indexTrafficsys");
               }else{
                 mythis.$alert(rs.data.info);
               }
              })
          }else{//身份证号码登录
            axios({
               headers:{
                'Content-Type':"application/json"
               },
               method:"post",
               url:myUtil.url+"/api/policeLogin",
               data:{cardId:mythis.police.cardId,password:mythis.police.password}
             }).then(function(rs){
               console.log(rs.data.info);
               if(rs.data.info=="登录成功"){
                 //第一种本地存储 将登录成功的返回数据 存储在前端本地
                 localStorage.removeItem("loginDriverCardId")
                 localStorage.setItem("loginPoliceCardId",rs.data.police.cardId);
                 //然后跳到启动主页面
                 mythis.$router.push("indexTrafficsys");
               }else{
                 mythis.$alert(rs.data.info);
               }
              })
          }
        }
      },
      //发送短信验证码http://localhost:8080/api/sendMessage?phone=15730593398
      sendCode(){
        console.log('sendMessage!');
        console.log(this.police);
        var mythis=this;
        axios({
           headers:{
            'Content-Type':"application/json"
           },
           method:"post",
           url:myUtil.url+"/api/sendMessage",
           data:mythis.police.cardId
         }).then(function(rs){
           console.log(rs.data.info);
           if(rs.data.info=="短信发送成功"){
             //第一种本地存储 将登录成功的返回数据 存储在前端本地
             mythis.police.confirmCode=rs.data.code;
             console.log(mythis.police.confirmCode);
           }else{
             mythis.$alert(rs.data.info);
           }
       })
      },
      ToRegister(){
        this.$router.push("registerTrafficsys");
      },
	  driverLogin(){
		this.$router.push("loginTrafficsys");
	  },
       phoneLogin(){//短信发送登录
        this.loginForm.nameTitle="手机号码",
        this.loginForm.passTitle="验证码",
        this.loginForm.ok=true,
        this.loginForm.num=11
       },
       AccountLogin(){//密码登录
        this.loginForm.nameTitle="账号",
        this.loginForm.passTitle="密码",
        this.loginForm.ok=false,
        this.loginForm.num=22
       }
    }
  }
</script>

<style>
</style>
